<template>
	<view class="top-bar">
		<view class="left">音乐盒</view>
		<view class="center" @click="search">
			<input type="text" value="" placeholder="搜索"/>
			<i class="iconfont">&#xe61a;</i>
		</view>
		<view class="right">
			<image src="../../static/image/LOGO.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		name: '',
		data(){
			return {
				
			}
		},
		methods:{
			search() {
				uni.navigateTo({
					url: "../search/Search",
					animationType: "slide-in-right",
					animationDuration: 1000
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.top-bar {
		display: flex;
		height: 49px;
		line-height: 49px;
		text-align: center;
		font-size: 40upx;
		border-bottom: 1px solid #eee;
		.left {
			width: 30%;
		}
		.center {
			position: relative;
			flex: 1;
			padding-top:5px;
			
			input {
				width: 100%;
				height: 30px;
				margin-top: 5px;
				border-radius: 20px;
				border: 1px solid #eee;
				background-color: #f1f2f6;
				font-size: 13px;
			}
			i {
				position: absolute;
				top: 53%;
				left: 65%;
				transform: translate(-50% ,-50%);
			}
		}
		.right {
			width: 20%;
			padding-top: 6px;
			image {
				width: 40px;
				height: 30px;
			}
		}
	}
</style>
